<template> 
	<view style="background-color: #F2F2F2;width: 100vw;height: 100%;"> 
		 
		<up-swiper v-if="infoModal.attachments" :list="infoModal.attachments"  height="750rpx" img-mode='aspectFill' ></up-swiper>
		<up-image v-else :show-loading="true" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png" width="750rpx" height="750rpx" ></up-image>
		
		<up-navbar title="" :autoBack="true" :bgColor='bgColor' :placeholder="true"> </up-navbar>

		<!-- 兑换券 -->
		<view class="coupons">
			<view style="background-color: fff;">
				<view style="height: 24rpx;"></view>
				<view class="title">{{infoModal.name}}</view>
				<view style="height: 19rpx;"></view>
				<view class="sub-title">
					<span class="color-ff6a00">{{infoModal.exchangeScore}}</span>
					<span class="color-666">积分</span> 
					<span class="color-666" v-if="infoModal.exchangeMoney >0">+</span> 
					<span class="color-F3" v-if="infoModal.exchangeMoney >0">{{infoModal.exchangeMoney}}</span> 
					<span class="color-666" v-if="infoModal.exchangeMoney >0">元</span> 
				</view>
				<view style="height: 24rpx;"></view>
			</view>
		</view> 
	 
		<!-- 使用方法 -->
		<view class="usage">
			<view class="usage-title">使用方法</view>
			<view class="chxy-row"> 
				<view class="ali-center-234">
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/public/one.png" class="w52h35"></image>
				</view>
				<view class="ali-center-234">
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/public/two.png" class="w52h35"></image>
				</view>
				<view class="ali-center-234"> 
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/public/three.png" class="w52h35"></image>
				</view>  	
			</view>
			<view style="height: 33rpx;"></view>
			<view class="chxy-row">
				<view class="ali-center-234">
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/public/a.png" class="wh40"></image>
				</view>
				<view class="ali-center-234">
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/public/b.png" class="wh40"></image>
				</view>
				<view class="ali-center-234">
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/jfsc/public/c.png" class="wh40"></image>
				</view> 
			</view>
			<view style="height: 23rpx;"></view>
			<view class="chxy-row">
				<view class="ali-center-234">兑换权益</view>
				<view class="ali-center-234">对应场景使用</view>
				<view class="ali-center-234">使用成功</view>
			</view> 
		</view>

		<!-- 兑换说明 -->
		<view class="instructions">
			<view class="instructions-title">兑换说明</view>
			<view style="height: 40rpx;"></view>
			<view class="chxy-row">
				<view class="notice-left">兑换次数:</view>
				<view class="notice-right">不限</view>
			</view>
			<view style="height: 40rpx;"></view>
			<view class="chxy-row">
				<view class="notice-left">兑后须知:</view>
				<view class="notice-right">{{infoModal.remark}}</view>
			</view>
		</view>

		<view style="height: 34rpx;"></view>
		<view style="height: 120rpx;"></view>

		<!-- 通用css组件 -->
		<view class="but-bottom-view" @click="toCreatPrder">
			<view class="but-bottom-fixed chxy-row-c-c">
				立即兑换
			</view>
		</view> 

	</view>
</template>

<script setup>
	import { goodsPublic } from '@/pagesPointShop/api/goods.js';
	import { onLoad, onUnload, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref, reactive } from 'vue'; 
	// import { useUserStore } from '@/store/user.js';
	// const store = useUserStore();   
	
	const searchId = ref('');
	const infoModal = ref({
		attachment:''
	});
	const show = ref(false);
	const bgColor = ref('transparent');

	onLoad((options) => {
		searchId.value = options.goodId // 商品编码  
		initDetailsData() 
	});
	
	// 初始化商品信息
	const initDetailsData = () => {
		let modal = {
            "functionName": "getMallGoodsInfoDetail", 
            "contentData": {
                "code": searchId.value
            }
        }
		goodsPublic(modal).then(res => {
			console.log('getGoodsTyperes', res) 
			let result = res.content.rowData[0]
			result['attachments'] = result.attachment ? result.attachment.split(',') : ''
		    infoModal.value = result
		}) 
	};   

	const toCreatPrder = async () => { 
		let modal = {
			"functionName": "mallOrderSave", 
			"contentData": { 
				"pointInviter":uni.getStorageSync('pointInviter') || '', // pointInviter 建议非扫邀请码进来需要清空或者移除该值
				"memberCode": uni.getStorageSync('pointUserInfo').memberCode,
				"memberCardCode": uni.getStorageSync('pointUserInfo').code,
				"detail": [ { "goodsCode": infoModal.value.code,  "qty": 1} ]
			}
		}
		const { opFlag, content } = await goodsPublic(modal)
		if (opFlag !== '1') {  
			return  // 下单失败
		}  
		if(!content.rowData){
			uni.showToast({
				title: '下单返回参数有问题',
				icon: 'none'
			});
			return
		} 
		uni.navigateTo({
			url: '/pagesPointShop/view/pay/payment?orderCode=' + content.rowData 
			 + '&orderInfo=' + encodeURIComponent(JSON.stringify(infoModal.value)) //正常不用传整个对象过去，让后端有空补下接口
		})    
	} 
</script>

<style scoped lang="scss">
	.content {
		background: #F2F2F2 !important;
		width: 100vw;
		height: 100%;
	} 

	.chxy-row-bt {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.chxy-row {
		display: flex;
		flex-direction: row; 
	}
	
	.ali-center-234 {
		display: flex;
		flex-direction: row;
		align-items: center; 
		justify-content: center;
		width: 234rpx;
	}

	.chxy-row-c-c {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.coupons {
		width: 702rpx;
		height: 124rpx;
		padding: 0 24rpx;
		background: #fff;

		.title {
			// width: 228rpx; 
			height: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
			line-height: 30rpx;
		}

		.sub-title {
			// width: 256rpx; 
			height: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FF6A00;
			line-height: 26rpx;
		}
	}

	.usage {
		margin: 20rpx 24rpx;
		width: 702rpx;
		height: 280rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.usage-title {
			padding-top: 25rpx;
			padding-bottom: 37rpx;
			margin-left: 24rpx;
			height: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
			line-height: 30rpx;
		}
	}

	.instructions {
		margin: 0rpx 24rpx;
		width: 702rpx;
		min-height: 228rpx; 
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 20rpx;

		.instructions-title {
			padding-top: 25rpx;
			margin-left: 24rpx;
			height: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
			line-height: 40rpx;
		}
	}

	.notice-left {
		margin-left: 24rpx;
		width: 130rpx;
		height: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 30rpx;
	}

	.notice-right {
		width: 522rpx;
		// height: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
		line-height: 40rpx;
	}

	.color-ff6a00 {
		color: #FF6A00;
	}

	.color-666 {
		color: #666666;
	}
	
	.color-F3 {
		color: #FF3333;
	}

	.color-red {
		color: red;
	}

	.orge-col {
		color: #FF6A00;
	}

	.submit-btn {
		width: 240rpx;
		height: 80rpx;
		background: #FF6A00;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #fff;
	}

	.close-btn {
		width: 236rpx;
		height: 76rpx;
		border-radius: 40rpx;
		border: 2rpx solid #999999;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #999999;
	}

	.but-bottom-view {
		width: 100vw;
		height: 120rpx;
		position: fixed;
		background-color: #F2F2F2;
		bottom: 0;
		left: 0;

		.but-bottom-fixed {
			width: 702rpx;
			height: 80rpx;
			background: #FF6A00;
			border-radius: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 30rpx;
			margin: 0 24rpx;
		}
	}
	.wh40{
		width: 40rpx;
		height: 40rpx;
	}
	.w52h35{
		width: 52rpx;height: 35rpx;
	}
</style>